<template>
	<view>
		<uni-list>
			<uni-list-item title="快速排序" :rightText="rightText" clickable showArrow @click="fastSort"></uni-list-item>
		</uni-list>
		<HM-dragSorts :list="list" :isLongTouch="true" @change="change" @confirm="confirm" @onclick="onclick">
		</HM-dragSorts>
		<!-- <button type="primary" size="mini" class="fab" style="right: 100px;" @click="subMove">保存位置</button>
		<button type="primary" size="mini" class="fab" @click="$refs.reportName.open()">发起报告</button> -->
		<uni-fab ref="fab" :pattern="pattern" :content="fabList" horizontal="right" vertical="bottom"
			direction="horizontal" @trigger="trigger" />
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<view style="padding: 10px 0;text-align: center;line-height: 2;font-size: 16px;">
				<view class="sortItem" v-for="item in paixu" :key="item.value" @click="sort(item.value,item.text)">
					{{item.text}}
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="reportName" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="报告名称" placeholder="请输入报告名称"
				:value="entity.ProjectName + entity.Name" @confirm="fabClick"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		setStorageEntityProjectXmRwIdObj
	} from '@/utils/tools.js'
	export default {
		data() {
			return {
				// 选择好的排序key
				sortValue: "",
				rightText: '',
				list: [],
				entity: {},
				fabList: [{
						iconPath: '/static/saveSort.png',
						selectedIconPath: '/static/fixbtn/saveSort.png',
						text: '保存位置',
						active: true
					},
					// {
					// 	iconPath: '/static/fixbtn/yes.png',
					// 	selectedIconPath: '/static/fixbtn/yes.png',
					// 	text: '发起报告',
					// 	active: true
					// }
				],
				pattern: {
					buttonColor: '#d1100b',
					selectedColor: '#d1100b',
					icon: 'more-filled',
					iconShow: 'more'
				},
				paixu: [{
						text: '按楼层排序',
						value: 'floor',
					}, {
						text: '按区域排序',
						value: 'region',
					},
					{
						text: '按专业排序',
						value: 'Major',
					},
					{
						text: '按问题排序',
						value: 'rating',
					}
				],
			}
		},
		onLoad(query) {
			this.entity = uni.getStorageSync('moveList')
			this.entity.ReportType = query.ReportType

			this.list = this.entity.TakeNotesList
			// 判断是从编辑页面过来的排序  还是报告页面过来的排序
			if (query.report) this.entity.ReportType = 1 //说明是从报告页面过来的排序  走不同的接口逻辑 url
		},
		onUnload() {
			console.log('离开了');
		},
		// 监听原生导航栏顶部返回按钮事件
		onBackPress() {
			let obj = {
				ProjectId: this.entity.ProjectId,
				TaskId: this.entity.Id,
				ControlKey: this.sortValue
			}
			// 获取上个页面数据
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			// 参数重新赋值便于传递刷新列表接口
			prevPage.$vm.upPrevPageObj = obj
			// 页数初始化
			prevPage.$vm.pagination.PageIndex = 1
			// 重新调用上个页面编辑页面的函数 重新调用接口刷新编辑列表数据
			console.log('返回的参数', obj, prevPage, prevPage.$vm.upPrevPageObj)
		},
		methods: {
			trigger(e) {
				if (e.index == 0) this.subMove()
				else if (e.index == 1) this.$refs.reportName.open()
			},
			sort(value, text) {
				this.sortValue = value
				uni.showLoading({
					mask: true
				})
				let url = ''
				if (this.entity.ReportType == 0) url = 'Base_ProjectWork/Base_Project/GetTakeJsonData'
				else url = 'Base_ProjectWork/Base_Project/GetProjectTakeJsonData'
				console.log(this.entity, value);
				this.rightText = text
				this.$refs.popup.close()
				this.$http(url, {
					PageIndex: 1,
					PageRows: 1,
					SortField: "CreateTime",
					SortType: "desc",
					Search: {
						ProjectId: this.entity.ProjectId,
						TaskId: this.entity.Id,
						ControlKey: value
					}
				}).then(res => {
					uni.hideLoading()
					if (res.Success && res.Data.length > 0) {
						this.list = res.Data[0].TakeNotesList
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			fastSort() {
				this.$refs.popup.open()
			},
			async subMove() {
				let url = ''
				if (this.entity.ReportType == 0) url = 'Base_ProjectWork/Base_Project/UpdateTakeJson'
				else url = 'Base_ProjectWork/Base_Project/UpdateProjectTakeJsonData'
				this.list.forEach((item, index) => {
					if (this.entity.ReportType == 0)
						item.UserIndexSort = index
					else item.IndexSort = index
				})
				this.entity.TaskId = this.entity.Id
				// 将布局好的列表更新entity中的TakeNotesList
				this.entity.TakeNotesList = this.list

				// 更新缓存EntityProjectXmRwIdObj对象
				let obj = {
					xmId: this.entity.ProjectId,
					rwId: this.entity.Id,
					xmName: this.entity.ProjectName,
					rwName: this.entity.Name,
				}
				setStorageEntityProjectXmRwIdObj(obj)

				await this.$http(url, this.entity).then(res => {
					console.log(res);
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '排序位置保存成功'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1500)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			// 发起报告
			async fabClick(e) {
				if (!e) return uni.showToast({
					icon: 'none',
					title: '请输入报告名称'
				})
				this.entity.Describe = ''
				this.entity.Edition = ''
				this.entity.TaskId = this.entity.Id
				this.entity.ReportName = e
				uni.showLoading()
				await this.subMove()
				this.$http('Base_ProjectWork/Base_Project/SaveReportData', this.entity).then(res => {
					console.log(res);
					uni.hideLoading()
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '发起报告成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/report/report'
							})
						}, 1000)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			change() {},
			confirm(e) {
				console.log('=== confirm start ===');
				console.log('被拖动行：', e.moveRow);
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				// 首先需要移除掉当前元素
				this.list.splice(e.index, 1);
				console.log(e.moveRow);
				// // 然后将当前元素给插入到对应的下标，splice函数yyds
				this.list.splice(e.moveTo, 0, e.moveRow);
				console.log('调整后的数据：', this.list);
				// 赋值序号，保存到后端服务器
				/* this.batchSave(
					this.list.map((item, index) => {
						item.sort = index;
						return item;
					})
				); */
				console.log('=== confirm end ===');
			},
			onclick() {},
		}
	}
</script>

<style>
	.fab {
		position: fixed;
		bottom: 10px;
		right: 10px;
	}

	.sortItem:active {
		background-color: #f5f5f5;
	}
</style>